<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
		<title></title>
		<style type="text/css">  
		    html{height:100%}    
		    body{height:100%;margin:0px;padding:0px}    
		    #container{height:100%}    
		</style> 
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=10W14fXXO0VElPqlcgbxfGxqTBfExGlo"></script>
		<script type="text/javascript">
			window.onload = function(){
				//创建地图实例
				var map = new BMapGL.Map("container");
				
				//设置中心点坐标 new BMapGL.Point(经度, 纬度);
				var point = new BMapGL.Point(116.404, 39.915);
				var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
				 
				//创建标注,(创建点)
				var marker = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915)); 
				//var marker = new BMapGL.Marker(point,{icon: myIcon});
				// 将标注添加到地图中	
				map.addOverlay(marker);  
				
				//创建文字
				var content = "天安门";
				var label = new BMapGL.Label(content, {       // 创建文本标注
				    position: point,                          // 设置标注的地理位置
				    offset: new BMapGL.Size(-20, -40)           // 设置标注的偏移量
				})  
				map.addOverlay(label); 
				
				//声明控件并添加到地图中
				map.addControl(scaleCtrl);
				var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
				map.addControl(zoomCtrl);
				var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
				map.addControl(cityCtrl);
				map.enableScrollWheelZoom(true);//开启鼠标滚轮
				//添加3d控件
				var navi3DCtrl = new BMapGL.NavigationControl3D();
				map.addControl(navi3DCtrl);
				//地图初始化，同时设置地图展示级别
				map.centerAndZoom(point, 15); 
			}
			
		</script>
	</head>
	<body>
		<div id="container"></div> 
	</body>
</html>
